{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="icon" href="{% static '/denwei/img/logo.ico' %}" type="image/x -icon">
    <link rel="stylesheet" href="{% static '/denwei/css/swiper.min.css' %}">
    <script src="{% static '/denwei/js/jquery.min.js' %}"></script>
    <script src="{% static '/denwei/js/swiper.min.js' %}"></script>
    <style type="text/css">
        /* 去掉标签默认的内边距和外边距 */
        body,p,h1,h2,h3,h4,h5,h6,ul,dl,dd,input,select{margin:0;padding:0}

        /* 去掉列表的项目符号 */
        ul{list-style:none;}

        em{font-style:normal;}

        /* 去掉默认的下划线 */
        a{text-decoration:none;}

        /* 去掉图片在加链接时的边框 */
        img{border:0;}

        #ou_container{
            width: 90%;
            overflow: hidden;
            background-color: white;
            margin: auto;
        }
        .myheader{
            overflow: hidden;
            height: 100px;
            margin: auto;
        }
        .myheader div{
            float: left;
            height: 100%;
        }
        .myheader_one img{
            height: 100%;
        }
        .myheader_one:last-child {
            float: right;
        }
        .mynav{
            width: 100%;
            height: 40px;
            overflow: hidden;
            background-color: #1C7AC0;
        }
        .mynav_son{
            height: 40px;
            width: 1050px;
            background-color: #1C7AC0;
            overflow: hidden;
            margin: auto;
{#            position: relative;#}
        }
        .mynav_son div{
            float: left;
            width: 150px;
            height: 100%;
            text-align: center;
            line-height: 40px;
{#            position: absolute;#}
        }
        .mynav_son div:hover{
            background-color: darkgreen;
        }
        .mynav_son div a{
{#            display: block;#}
            color: white;
        }
        .mynav_son div a:active{
            color: red;
        }
        .myswiper{
            width: 100%;
        }
        .swiper-slide{

            display:flex;
            justify-content:center;
            align-items:center;
        }
        .swiper-slide  img{
            width: 100%;
        }
        .change_content{
            width: 100%;
            background-color: orange;
            overflow: hidden;
        }
        .change_content div{
            float: left;
        }
        .change_left{
            width: 30%;
            height: 400px;
            background-color: red;
        }
        .change_right{
            width: 70%;
            height: 400px;
            background-color: yellow;
        }
        .myfooter{
            width: 100%;
            height: 100px;
            background-color: #1C7AC0;
            text-align: center;
            line-height: 100px;
        }
        .myfooter p{
            font-size: larger;
            color: white;
        }
        .myfooter a{
            color: white;
        }
        .myfooter a:hover{
            color: red;
        }
    </style>
</head>
<body>
<div id="ou_container">
    <div class="myheader">
        <div class="myheader_one"><img src="{% static '/denwei/img/logo.jpg' %}" alt="..."></div>
        <div class="myheader_one"><img src="{% static '/denwei/img/company_name.png' %}" alt="..."></div>
        <div class="myheader_one"><img src="{% static '/denwei/img/weixin_company.png' %}" alt="..."></div>
    </div>
    <div class="mynav">
        <div class="mynav_son">
            <div><a href="#">公司首页</a></div>
            <div><a href="#">产品展示</a></div>
            <div><a href="#">新闻中心</a></div>
            <div><a href="http://qiye.molbase.cn/c360386" target="_blank">采购中心</a></div>
            <div><a href="#">厂容厂貌</a></div>
            <div><a href="#">关于我们</a></div>
            <div><a href="#">联系我们</a></div>
        </div>
    </div>
    <div class="myswiper">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="{% static 'denwei/img/index_01.jpg' %}" alt="..."></div>
                <div class="swiper-slide"><img src="{% static 'denwei/img/index_02.jpg' %}" alt="..."></div>
                <div class="swiper-slide"><img src="{% static 'denwei/img/index_03.jpg' %}" alt="..."></div>
                <div class="swiper-slide"><img src="{% static 'denwei/img/index_04.jpg' %}" alt="..."></div>
                <div class="swiper-slide"><img src="{% static 'denwei/img/index_05.jpg' %}" alt="..."></div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </div>
    <div class="change_content">
        <div class="change_left"></div>
        <div class="change_right"></div>
    </div>
    <div class="myfooter">
        <p>重庆赛普那斯科技有限公司 版权所有(©)2015-2017 友情链接 <a href="http://www.chemnet.com.cn"  target="_blank">中国化工网</a>  <a href="http://www.chemnet.com"  target="_blank">全球化工网</a>
            <a href="http://www.molbase.cn"  target="_blank">摩贝化学</a></p>
    </div>
</div>
<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        paginationClickable: true,
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: 1500,
        autoplayDisableOnInteraction: false,
        loop : true
    });
{#    鼠标悬停，停止播放。#}
    $('.swiper-wrapper').mouseenter(function () {
        swiper.stopAutoplay();
    });
    $('.swiper-wrapper').mouseleave(function () {
        swiper.startAutoplay();
    })
</script>
</body>
</html>